<template>
  <div>
    <searchBox @searchChange="searchChange" />
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
      <div class="gva-table-box">
        <div class="gva-btn-list"><el-text class="mx-1" size="large">投入产出率</el-text></div>
          <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          row-key="ID"
          :data="tableData"
          :height="tableData.length > 10 ? 600 : null"
          border
        >
  
          <el-table-column
            align="left"
            label="日期"
            prop="date"
          />
          <el-table-column
            align="left"
            label="新增"
          >
          <template #default="scope">
              {{ scope.row.new_remain}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="次留"
          >
          <template #default="scope">
              {{ scope.row.time_remain }}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="三留"
          >
          <template #default="scope">
              {{ scope.row.three_remain}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="四留"
          >
          <template #default="scope">
              {{ scope.row.four_remain}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="五留"
          >
          <template #default="scope">
              {{ scope.row.five_remain}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="六留"
          >
          <template #default="scope">
              {{ scope.row.six_remain}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="七留"
          >
          <template #default="scope">
              {{ scope.row.seven_remain}}
          </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import lineChart from '../../components/echarts/lineChart.vue';
  import searchBox from '../../components/search/searchBox.vue';
  import type { TabsPaneContext } from 'element-plus';
  import { sumByKey } from '../../utils/fmtData'
  
  import {
          getHugeList
  } from '@/api/openApi'
  
  let activeName = ref<string|number>('new')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName = ref(tab.paneName)
    const td = JSON.parse(JSON.stringify(tableData.value))
    tableData.value = []
    setTimeout(() => {
      tableData.value = td
    }, 200);
  }
  
  // =========== 表格控制部分 ===========
  const tableData = ref([])
  const searchInfo = ref({})
  
  var searchChange = function(date) {
    searchInfo.value = date
    getTableData()
  }
  
  
  const chartData = ref({
  xAxis: [],
  series: [{
    name: '新增',
    type: 'line',
    data: []
  },{
    name: '次留',
    type: 'line',
    data: []
  },{
    name: '三留',
    type: 'line',
    data: []
  },{
    name: '四留',
    type: 'line',
    data: []
  },{
    name: '五留',
    type: 'line',
    data: []
  },{
    name: '六留',
    type: 'line',
    data: []
  },{
    name: '七留',
    type: 'line',
    data: []
  
  }],
  legend: ['新增','次留','三留','四留','五留','六留','七留'],
  title: 'ROI统计'
})
  const getTableData = async() => {
    const table = await getHugeList({ type:"cronCost",...searchInfo.value })
    if (table.code == 0) {
      let arr = []
      let data = {}
      chartData.value.xAxis = []
    chartData.value.series[0].data = []
    chartData.value.series[1].data = []
    chartData.value.series[2].data = []
    chartData.value.series[3].data = []
    chartData.value.series[4].data = []
    chartData.value.series[5].data = []
    chartData.value.series[6].data = []
      if(table.data.list.length > 0){
        table.data.list.forEach(item=>{
          let jsonData = JSON.parse(item.response)
          data.new_remain = jsonData.newRemain != 0 ? jsonData.newRemain : '-'
          data.time_remain = jsonData.timeRemain != 0 ? jsonData.newRemain + jsonData.timeRemain : '-'
          data.three_remain = jsonData.threeRemain != 0 ? jsonData.newRemain + jsonData.timeRemain + jsonData.threeRemain : '-'
          data.four_remain = jsonData.fourRemain != 0 ? jsonData.newRemain + jsonData.timeRemain + jsonData.threeRemain + jsonData.fourRemain : '-'
          data.five_remain = jsonData.fiveRemain != 0 ? jsonData.newRemain + jsonData.timeRemain + jsonData.threeRemain + jsonData.fourRemain + jsonData.fiveRemain : '-'
          data.six_remain = jsonData.sixRemain != 0 ? jsonData.newRemain + jsonData.timeRemain + jsonData.threeRemain + jsonData.fourRemain + jsonData.fiveRemain + jsonData.sixRemain : '-'
          data.seven_remain = jsonData.sevenRemain != 0 ? jsonData.newRemain + jsonData.timeRemain + jsonData.threeRemain + jsonData.fourRemain + jsonData.fiveRemain + jsonData.sixRemain + jsonData.sevenRemain : '-'
          arr.push({
            date: item.date,
            new_remain: formatNumber(data.new_remain,jsonData.expend),
            time_remain: formatNumber(data.time_remain,jsonData.expend),
            three_remain: formatNumber(data.three_remain,jsonData.expend),
            four_remain: formatNumber(data.four_remain,jsonData.expend),
            five_remain: formatNumber(data.five_remain,jsonData.expend),
            six_remain: formatNumber(data.six_remain,jsonData.expend),
            seven_remain: formatNumber(data.seven_remain,jsonData.expend)
          })
          chartData.value.xAxis.push(item.date)
          chartData.value.series[0].data.push(chartFormat(data.new_remain,jsonData.expend))
          chartData.value.series[1].data.push(chartFormat(data.time_remain,jsonData.expend))
          chartData.value.series[2].data.push(chartFormat(data.three_remain,jsonData.expend))
          chartData.value.series[3].data.push(chartFormat(data.four_remain,jsonData.expend))
          chartData.value.series[4].data.push(chartFormat(data.five_remain,jsonData.expend))
          chartData.value.series[5].data.push(chartFormat(data.six_remain,jsonData.expend))
          chartData.value.series[6].data.push(chartFormat(data.seven_remain,jsonData.expend))
        })
        arr = sumByKey(arr,'date')
        tableData.value = arr
      }else{
        tableData.value = []
      }
     
    }
  }

  
  const formatNumber = (num,int) => {
    if (num == '-'){
      return '-'
    }else{
      return parseFloat((num/int/100000).toFixed(2));
    }
}

const chartFormat = (num,int) =>{
  if (num == '-'){
    return 0
  }else{
    return parseFloat((num/int/100000).toFixed(2));
  }
}

  </script>